<template>
    <div class="goodList" :class="{marginB:current=='1'}">
        <div class="banner" v-if="flag">
            <van-swipe :autoplay="3000" :indicator-color="'#ff5000'">
                <van-swipe-item v-for="(v, index) in dataList" :key="index">
                    <img v-lazy="v.img" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="goods" v-for="(v,index) in goodsList" :key="index">
            <img :src="v.img1" alt="">
            <p class="content">{{ v.proname }}</p>
            <div class="priceData">
                <p class="price">￥<span class="priceNum">{{ v.originprice }}</span></p>
                <span class="buyerNum">{{ v.sales }}人已购买</span>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
    name:"goodListSon",
    data() {
        return {
            
        };
    },
    props:["dataList","goodsList","flag","current"]
}
</script>

<style lang="scss" scoped>
    .goodList {
        width: 7.02rem;
        margin: auto;
        column-count: 2;
        margin-bottom: 0.6rem;
    }
    .marginB {
        margin-bottom: 1.1rem;
    }
    .goodList .banner .van-swipe {
        width: 3.44rem;
        height: 5.00rem;
        border-radius: 0.1rem;
        overflow: hidden;
    }
    .goodList .banner .van-swipe img {
        width: 3.44rem;
        height: 5rem;
    }
    .goodList .goods {
        width: 3.44rem;
        border-radius: 0.1rem;
        overflow: hidden;
        background: #fff;
        margin-bottom: 0.2rem;
    }
    .goodList .goods img {
        width: 100%;
        height: 3.3rem;
    }
    .goodList .goods .content {
        width: 3rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0.4rem auto 0.3rem;
        color: #333333;
        font-size: 0.26rem;
    }
    .goodList .goods .priceData {
        margin-left: 0.2rem;
        display: flex;
        margin-bottom: 0.25rem;
    }
    .goodList .goods .priceData .price {
        font-size: 0.2rem;
        color: #ff5500;
        margin-right: 0.1rem;
        
    }   
    .goodList .goods .priceData .price .priceNum {
        font-size: 0.28rem;
    }
    .goodList .goods .priceData .buyerNum {
        color: #ababab;
        font-size: 0.2rem;
    }
</style>